<template>
  <el-select ref="select" :value="value" placeholder="请选择" clearable style="width: 100%;" @visible-change="visibleChange" @clear="clear">
    <el-option ref="option" class="option" :value="optionData.id" :label="optionData.name">
      <el-tree
        ref="tree"
        class="tree"
        :node-key="nodeKey"
        :data="data"
        :props="props"
        :default-expanded-keys="[value]"
        highlight-current
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      />
    </el-option>
  </el-select>

</template>

<script>

export default {
  name: 'CyTreeSelect',
  props: {
    // v-model绑定
    value: {
      type: [String, Number],
      default: ''
    },
    // 树形的数据
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 每个树节点用来作为唯一标识的属性
    nodeKey: {
      type: [String, Number],
      default: 'id'
    },
    // tree的props配置
    props: {
      type: Object,
      default: function() {
        return {
          label: 'label',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      optionData: {
        id: '',
        name: ''
      }
    }
  },
  watch: {
    'value': function(val) {
      console.log('触发函数改变值1', this.value)
      if (!this.isEmpty(this.data)) {
        this.init(val)
      }
    },
    'data': function(val) {
      console.log('触发函数改变值2', this.value)
      if (!this.isEmpty(val)) {
        this.init(this.value)
      }
    }
  },
  mounted() {
    setTimeout(() => {
      console.log('5秒后的值', this.$props.value)
    }, 5000)

    if (!this.isEmpty(this.data)) {
      console.log('初始化', this.value)
      this.init(this.value)
    }
  },
  // setup(props,context){
  //
  //   function handleNodeClickB(data){
  //
  //     console.log("触发函数",data['id'])
  //
  //     context.emit('update:modelValue', data['id'])
  //   }
  //   return {handleNodeClickB}
  // },

  methods: {
    test(data) {
      this.handleNodeClick(data)
    },
    // 是否为空
    isEmpty(val) {
      for (const key in val) {
        return false
      }
      return true
    },
    handleNodeClick(data) {
      const label = this.props.label || 'name'
      this.optionData.id = data[this.nodeKey]
      this.optionData.name = data[label]
      // this.handleNodeClickB(data);

      this.$emit('input', data['id'])
      this.$nextTick(() => {
        console.log('值3', data)

        this.$refs.select.visible = false
      })
    },
    init(val) {
      this.$nextTick(() => {
        console.log('是否', val)
      })

      if (val) {
        this.$nextTick(() => {
          const label = this.props.label || 'name'
          this.$refs.tree.setCurrentKey(val)
          const node = this.$refs.tree.getNode(val)
          console.log(node)
          this.optionData.id = val
          this.optionData.name = node.data[label]
          // this.handleNodeClickB(this.optionData);
          this.optionData = this.$_.cloneDeep(this.optionData)
        })
      } else {
        this.$refs.tree.setCurrentKey(null)
      }
    },
    visibleChange(e) {
      if (e) {
        const selectDom = document.querySelector('.is-current')
        setTimeout(() => {
          this.$refs.select.scrollToOption({ $el: selectDom })
        }, 0)
      }
    },
    clear() {
      this.$emit('input', '')
    }
  }
}
</script>

<style lang="scss" scoped>
    .option {
        height: auto;
        line-height: 1;
        padding: 0;
        background-color: #fff;
    }

    .tree {
        padding: 4px 20px;
        font-weight: 400;
    }
    :deep(.el-form-item__content) {
  width:100% !important
}
</style>
